<template>
  <div id="roseChart" style="height: 45vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "roseEchart",
  data() {
    return {
      chart: null,
      options: {}
    };
  },
  created() {
    // this.getData();
  },
  mounted() {
    this.initOptions();
    this.initCharts();
  },
  methods: {
    initOptions() {
      this.options = {
        title: {
          text: "指标占比",
          // subtext: 'Fake Data',
          left: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          left: "center",
          top: "bottom",
          data: ["食品安全", "信用监管", "行政执法", "一品一码"]
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: "Area Mode",
            type: "pie",
            radius: [20, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 5
            },
            data: [
              { value: 30, name: "食品安全" },
              { value: 28, name: "信用监管" },
              { value: 26, name: "行政执法" },
              { value: 24, name: "一品一码" }
            ]
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("roseChart"));

      this.chart.setOption(this.options);
    }
  }
};
</script>
